<? $this -> load -> view('header');?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script language="JavaScript">
 var map;
	$(document).ready(function () {
		 $.get('<?=$current_module?>/getlandtype', function(data) {
		 	var create="";
		 	$.each($.parseJSON(data), function() {
		 		$('#checkboxes').append('<input type="checkbox" id="'+this.landtypeid+'" name="id" value="'+this.landtypeid+'" checked="checked" /> ' + this.name );
		 		
		 		//create+='<input type="checkbox" id="'+this.landtypeid+'" /> ' + this.name ;
		 	});
   		 	
   		 });
   		 var mapDiv = document.getElementById('map-canvas');
		 map = new google.maps.Map(mapDiv, {
			center : new google.maps.LatLng(15.083, 105.047),
			zoom : 11,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			streetViewControl: false,
			navigationControl: true,
			navigationControlOptions: {
			      style: google.maps.NavigationControlStyle.SMALL
			}
		});
		
		var bounds;
		$.get('<?echo base_url();?>index.php/land/getlandall', function(data) {				
				$.each($.parseJSON(data), function() {
					var land = this;
					var paths = new Array();
					for(i=0;i<land.polygon[0].length;i++){
						var loc = land.polygon[0][i].split(",")
			            var lat = parseFloat(loc[0])
			            var lng = parseFloat(loc[1])
						paths.push(new google.maps.LatLng(lat, lng));
					}
					 var shape = new google.maps.Polygon({
					    paths: paths,
					    strokeColor: land.landcolor.toString(),
					    strokeOpacity: 0.8,
					    strokeWeight: 2,
					    fillColor: land.landcolor.toString(),
					    fillOpacity: 0.35
					  });
				  
					google.maps.event.addListener(shape, 'mouseover', function() {
						$("#user_infor").html("");
						$("#user_infor").append("<b>ชื่อที่ดิน:</b><br/>"+land.landname+"<br/>");
						$("#user_infor").append("<b>Latitude:</b><br/>"+land.Lat+"<br/>");
						$("#user_infor").append("<b>Logtitude:</b><br/>"+land.Lng+"<br/>");
						$("#user_infor").append("<b>ประเภทที่ดิน:</b><br/>"+land.landType+"<br/>");
						$("#user_infor").append("<b>ขนาดที่ดิน:</b><br/><br/>");
						$("#user_infor").append("<b><a href='#'>Read More</a></b>");
						


					});
				
					  shape.setMap(map);
					
					
				});
  				
				

		});
	});
	function getvalue(){
	  var e= document.frm.elements.length;
	  var cnt=0;
	  var typeID="";
	
	  for(cnt=0;cnt<e;cnt++)
	  {
		   if(document.frm.elements[cnt].name=="id"&& document.frm.elements[cnt].checked){
				var tmp = document.frm.elements[cnt].value;
			  	typeID=typeID+tmp+",";
			  
		   }
	  }
	  var newStr = typeID.substring(0, typeID.length-1);
	  $('#map-canvas').html("");
			  	
	   var mapDiv = document.getElementById('map-canvas');
		 map = new google.maps.Map(mapDiv, {
			center : new google.maps.LatLng(15.083, 105.047),
			zoom : 11,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			streetViewControl: false,
			navigationControl: true,
			navigationControlOptions: {
			      style: google.maps.NavigationControlStyle.SMALL
			}
		});
		
		var bounds;
		$.get('<?echo base_url();?>index.php/land/getland_by_type',{landtype:newStr}, function(data) {				
				$.each($.parseJSON(data), function() {
					var land = this;
					var paths = new Array();
					for(i=0;i<land.polygon[0].length;i++){
						var loc = land.polygon[0][i].split(",")
			            var lat = parseFloat(loc[0])
			            var lng = parseFloat(loc[1])
						paths.push(new google.maps.LatLng(lat, lng));
					}
					 var shape = new google.maps.Polygon({
					    paths: paths,
					    strokeColor: land.landcolor.toString(),
					    strokeOpacity: 0.8,
					    strokeWeight: 2,
					    fillColor: land.landcolor.toString(),
					    fillOpacity: 0.35
					  });
				  
					google.maps.event.addListener(shape, 'mouseover', function() {
						$("#user_infor").html("");
						$("#user_infor").append("<b>ชื่อที่ดิน:</b><br/>"+land.landname+"<br/>");
						$("#user_infor").append("<b>Latitude:</b><br/>"+land.Lat+"<br/>");
						$("#user_infor").append("<b>Logtitude:</b><br/>"+land.Lng+"<br/>");
						$("#user_infor").append("<b>ประเภทที่ดิน:</b><br/>"+land.landType+"<br/>");
						$("#user_infor").append("<b>ขนาดที่ดิน:</b><br/><br/>");
						$("#user_infor").append("<b><a href='#'>Read More</a></b>");
						


					});
				
					  shape.setMap(map);
					
					
				});
  				
				

		});
	}


	


</script>
<div id="middle">
	<? $this -> load -> view('land/left_menu');?>
	<div id="center-column">
		<div class="top-bar">
			<h1>การแยกประเภทที่ดิน</h1>
			<form name="frm">
			<span id="checkboxes"></span><input type="button" value="Fillter" onclick="getvalue();" />
			</form>
		</div>
		
			<div id="map-canvas" style="width: 100%; height: 100%"></div>
			
		
	
	</div>
	<div id="right-column">
		<strong class="h">Quick Info</strong>
		<div class="box" >
			<span id="user_infor"></span>
		</div>
	</div>
</div>
<? $this -> load -> view('footer');?>